<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-05 16:26:41
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="attribute">
    <el-popover
      placement="bottom"
      popper-class="moreOperatePopover"
      width="220"
      trigger="click"
      ref="attribute"
    >
      <span
        slot="reference"
        style="
          display: flex;
          align-items: center;
          background: #f5f5f5;
          cursor: pointer;
          padding: 5px;
        "
        ><i
          class="el-icon-s-operation"
          style="color: #999; cursor: pointer"
        ></i>
        <span style="margin-left: 6px; color: #999; font-size: 12px"
          >属性</span
        ></span
      >
      <div class="attributeMain" style="padding: 8px 5px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>参与人</span></span>
          <el-switch
            v-model="attributeForm.participants"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>抄送人</span></span>
          <el-switch
            v-model="attributeForm.ccTo"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>完成审批</span></span>
          <el-switch
            v-model="attributeForm.finishReview"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>任务描述</span></span>
          <el-switch
            v-model="attributeForm.taskDescription"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>优先级</span></span>
          <el-switch
            v-model="attributeForm.priority"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>计划工时</span></span>
          <el-switch
            v-model="attributeForm.workingHours"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>标签</span></span>
          <el-switch
            v-model="attributeForm.label"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>子任务</span></span>
          <el-switch
            v-model="attributeForm.childTask"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>附件</span></span>
          <el-switch
            v-model="attributeForm.file"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>检查项</span></span>
          <el-switch
            v-model="attributeForm.checkList"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>项目清单</span></span>
          <el-switch
            v-model="attributeForm.taskList"
            @change="handleAttribute(attributeForm)"
          >
          </el-switch>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    handleAttribute: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      attributeForm: {
        // 参与人
        participants: false,
        // 抄送人
        ccTo: false,
        // 完成审批
        finishReview: false,
        // 任务描述
        taskDescription: false,
        // 优先级
        priority: false,
        // 计划工时
        workingHours: false,
        // 标签
        label: false,
        // 子任务
        childTask: false,
        // 附件
        file: false,
        // 检查项
        checkList: false,
        // 任务清单
        taskList: true,
      },
    };
  },
  methods: {},
    created() {
    if (localStorage.getItem("attribute")) {
      this.attributeForm = localStorage.getItem("attribute") ? JSON.parse(localStorage.getItem("attribute")) : this.attributeForm
    }
  },
};
</script>

<style lang="scss" scoped>
.attribute {
  .attributeMain {
    padding: 8px;
  }
}
</style>